import React, { Component, Fragment } from 'react'
import logo from './logo.png'
import './style.css'
import { Menu } from 'antd';
import {  DeploymentUnitOutlined } from '@ant-design/icons';
import axios from 'axios'
import { Link } from 'react-router-dom'

// const { SubMenu } = Menu;

class AppHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    getMenuItems() {

       return this.state.list.map(item=> {
            return (
                <Menu.Item key={item.id} >
                    <Link to={`/${item.id}`}>
                       <DeploymentUnitOutlined /> {item.title}
                  </Link>
                </Menu.Item>
            )
        })
        
    }
    render() {
        return (
        <Fragment>
            <Link to="/">
            <img src={logo} className="app-header-logo" alt="logo"/>
            </Link>
            <Menu mode="horizontal" className="app-header-menu">
               {this.getMenuItems()}
            </Menu>
            
        </Fragment>
        )
    }
    componentDidMount(){
        axios.get('http://www.dell-lee.com/react/api/header.json').then((res)=> {
            this.setState({
                list:res.data.data
            })
        })
    }
}
export default AppHeader